<template>
    <div ref="iframeCnt" class="com-cnt">
        <!-- 购物车遮罩层 -->
        <div class="mask" id="gwcmask" :class="[gwcflag?'showclass':'hideclass']">
            <div class="mask_box">
                <div class="mbox_top">
                    <div class="head">
                        <img :src="goodsdetail.thumbnail" alt="">
                    </div>
                    <div class="t-right">
                        <h5> 
                            会员价
                            <span class="qian">{{goodsdetail.price}}</span>
                            <span class="buyChi">元</span>
                        </h5>
                        
                        <p>{{goodsdetail.name}}</p>
                    </div>
                </div>
                <div class="mbox_bottom">
                    <p v-if="skus.length>1">规格</p>
                    <div v-if="skus.length>1" v-for="(sku,skuIndex) in skus">
                        <span class="bor" :class="{'selected':skuIndex==skuClick}" @click="changeSku(skuIndex)">{{sku.specificationValues[0].value}}</span>
                    </div>
                    <div class="plussub">
                        <span class="many">数量</span>
                        <input class="yzquantity1 spinner" type="text" value="1" name="demo1" v-model="gwcnum" :disabled="goodsdetail.classifyId == 3">
                        <br>
                    </div>
                </div>
                <div class="bom">
                    <button class="cancel" @click="hidemask">取消</button>
                    <button class="sure" @click="gwcadmit">确定</button>
                </div>
            </div>
        </div>
        <!-- 立即购买遮罩层 -->
        <div class="mask" id="ljgmmask" :class="[ljgmflag?'showclass':'hideclass']">
            <div class="mask_box">
                <div class="mbox_top">
                    <div class="head">
                        <img :src="goodsdetail.thumbnail" alt="">
                    </div>
                    <div class="t-right">
                        <h5>
                            会员价：
                            <span class="qian" >{{goodsdetail.price}}</span>
                            <span class="buyChi">元</span>
                        </h5>
                        <p>{{goodsdetail.name}}</p>
                    </div>
                </div>
                <div class="mbox_bottom">
                    <p v-if="skus.length>1">规格</p>
                    <div v-if="skus.length>1" v-for="(sku,skuIndex) in skus">
                        <span class="bor" :class="{'selected':skuIndex==skuClick}" @click="changeSku(skuIndex)">{{sku.specificationValues[0].value}}</span>
                    </div>
                    <div class="plussub">
                        <span class="many">数量</span>
                        <input class="yzquantity1 spinner" type="text" value="1" name="demo1" v-model="ljgmnum" :disabled="goodsdetail.classifyId == 3">
                        <br>
                    </div>
                </div>
                <div class="bom">
                    <button class="cancel" @click="hidemask">取消</button>
                    <button class="sure" @click="ljgmadmit">确定</button>
                </div>
            </div>
        </div>
        <!-- 详情 -->
        <div class="box">
            <div class="lbt">
                <img :src="goodsdetail.thumbnail" alt="详情图">
            </div>
            <div class="parag">
                <p style="font-size: .4rem;">{{goodsdetail.name}}</p>
                <span style="color:#999;">
                    市场价
                    <s style="text-decoration:line-through;color:#999;">
                        <span style="font-size:.32rem;display:inline-block;text-decoration:line-through;">{{goodsdetail.marketPrice}}</span>
                        元</s>
                </span>
                <span class="price_bg">
                    <span class="price"> 会员价
                        <span class="pir">{{goodsdetail.price}}</span>
                    </span>
                </span>
            </div>
            <div class="detail">
                <p>商品详情</p>
            </div>
            <div class="detail_box" v-html="goodsdetail.introduction">
            </div>
        </div>
        <footer>
            <button class="buy" @click="buynow">立即购买</button>
            <button class="incar" @click="pushcar">加入购物车</button>
        </footer>
    </div>
</template>

<script>
import { domain,domain2 } from '@/assets/js/config'
import axios from 'axios'
import Qs from 'qs'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'njxdetailsPage',
    data() {
        return {
            goodsdetail: {},
            gwcflag: false,
            ljgmflag: false,
            tabIndex: 0,
            defaultSku: '',
            uthenticationStatus: localStorage.getItem('uthenticationStatus'),
            isVIP: '',
            vipType: '',
            mobile: localStorage.getItem('phone'),
            ljgmnum:1,
            gwcnum:1,
            skuid: 0,
            skus: [],
            skuClick:0
        }
    },
    mounted() {
        var goodsid = this.$route.query.id
        var userToken = localStorage.getItem('token')
        let self = this
        axios({
            url: domain2 + '/shop/api/product/detail/' + goodsid,
            method: 'post',
            //data: Qs.stringify({ 'id': goodsid }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        }).then(res => { self.showgoodsSucc(res) }).catch(err => { self.showgoodsFail(err) })
        self.getuserinfo()
        
    },
    methods: {
        changeSku(skuIndex){
            let that =this
            that.skuClick = skuIndex
            that.skuid = that.skus[skuIndex].id
        },
        //加入购物车遮罩层
        pushcar: function () {
            let that = this
            that.gwcflag = true
        },
        //立即购买遮罩层
        buynow: function () {
            let that = this
            that.ljgmflag = true
        },
        //能否去购买
        canljgm: function(){
            var that = this
            var ljgmnum = $('#ljgmnum').val()
            //购买成功
            that.ljgmflag = false
            if(that.vipType == 0){
                maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还不是会员' })
                setTimeout(function(){
                    that.$router.push('/exprecharge')
                },1000)
            }else if(that.vipType == 999){
                if(that.uthenticationStatus == 2){
                    maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                    setTimeout(function(){
                        that.$router.push('/shiming')
                    },1000)
                }else{
                    maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还不是正式会员' })
                    setTimeout(function(){
                        that.$router.push('/newrecharge')
                    },1000)
                }
            }else{
                let that = this
                if(that.uthenticationStatus == 2){
                    maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                    setTimeout(function(){
                        that.$router.push('/shiming')
                    },1000)
                }else{
                    //生成订单
                    that.$router.push({
                        path: 'orderDetail',
                        query: {
                            'num': that.ljgmnum,
                            'thumbnail': that.goodsdetail.thumbnail,
                            'price': that.goodsdetail.price,
                            'name': that.goodsdetail.name,
                            'from': '1',
                            'skuId':that.skuid
                        }
                    })
                }
                
            }
        },
        canljgmfail: function(err){
            console.log(err)
        },
        showgoodsSucc: function (res) {
            let that = this
            that.goodsdetail = res.data.data
            that.priceList = res.data.data.priceList
            that.defaultSku = that.goodsdetail.defaultSku
            that.skus = res.data.data.skus
            that.skuid = that.skus[0].id
        },
        showgoodsFail: function (err) {
            console.log(err)
        },
        //点击取消
        hidemask: function () {
            var that = this
            that.gwcflag = false
            that.ljgmflag = false
        },
        //加入购物车点击确定
        gwcadmit: function () {
            var that = this
            var userToken = localStorage.getItem('token')
            var gwcnum = $('#gwcnum').val()
            if (!userToken) {
                maskTips({ id: 'not-login', txt: '您还未登录' })
                that.$router.push('/login')
            }
            if(that.uthenticationStatus == 2){
                maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还未进行会员认证' })
                setTimeout(function(){
                    that.$router.push('/shiming')
                },1000)
            }else{
                that.togwc()
            }
        },
        //立即购买点击确定
        ljgmadmit: function () {
            var that = this
            var userToken = localStorage.getItem('token')
            if (!userToken) {
                that.$router.push('/login')
            }
            that.canljgm() 
        },
        togwc: function () {
            var that = this
            that.gwcflag = false
            if(that.vipType == 0){
                maskTips({ id: 'no-shiming'+new Date().getTime(), txt: '您还不是会员' })
                setTimeout(function(){
                    that.$router.push('/exprecharge')
                },1000)
            }else if(that.vipType == 999){
                if(uthenticationStatus==2){
                    maskTips({ id: 'togwc-fail'+new Date().getTime(), txt: '您未进行会员认证' })
                    setTimeout(function(){
                        that.$router.push('/shiming')
                    },1000)
                }else{
                    maskTips({ id: 'togwc-fail'+new Date().getTime(), txt: '您还不是正式会员' })
                    setTimeout(function(){
                        that.$router.push('/newrecharge')
                    },1000)
                }
            }else{
                axios({
                    url: domain2 + '/shop/api/cart/add',
                    method: 'post',
                    data: Qs.stringify({ 'mobile': that.mobile, 'skuId': that.skuid, 'quantity':that.gwcnum}),
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                }).then(res => {
                    maskTips({ id: 'togwc-fail'+new Date().getTime(), txt: res.data.message })
                }).catch(err => { that.togwcerr(err) })
            }
        },
        togwcerr: function (err) {
            console.log(err)
        },
        getuserinfo(){
            var userToken = localStorage.getItem('token')
            var self = this
            axios({
                url: domain + "/xshk/f/home/info?token=" + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify({})
            }).then(res => { self.checkUser(res) }).catch(err => { self.checkUserFail(err) })
        },
        checkUser(res) {
            var self = this
            self.isVIP = res.data.data.isVIP
            self.vipType = res.data.data.vipType
        },
        checkUserFail(err){
            console.log(err)
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
}

.left {
    font-size: 0.28rem;
    position: absolute;
    left: 0.34rem;
    top: 0.36rem;
}

.title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.92rem;
}

/* 详情 */
.box {
    background: #efeff4;
    width: 100%;
    height: auto;
}

.box .lbt {
    width: 100%;
    height: 7.46rem;
}

.box .lbt img {
    width: 100%;
    height: 7.46rem;
}

.box .parag {
    width: 100%;
    padding: 0.3rem 0.26rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    color: #3c3c3c;
    background: #fff;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 0.01rem;
    height:3.36rem;
}

.box .parag .doller {
    color: #ef6759;
    font-weight: 500;
    font-size 18px
}

.box .attribute {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    font-size: 0.3rem;
    background: #fff;
    padding: 0 0.26rem;
    box-sizing: border-box;
    line-height: 1rem;
}

.box .attr_box {
    width: 100%;
    height: auto;
    font-size: 0.24rem;
    color: #000;
    padding: 0.4rem 0.54rem;
    box-sizing: border-box;
    line-height: 0.46rem;
}

.box .detail {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    font-size: 0.3rem;
    background: #fff;
    padding: 0 0.26rem;
    box-sizing: border-box;
    line-height: 1rem;
}

.box .detail_box {
    width: 100%;
    height: auto;
    /* height: 2.6rem; */
    font-size: 0.24rem;
    color: #000;
    padding: 0.2rem 0.2rem;
    box-sizing: border-box;
    line-height: 0.46rem;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 0.01rem;
    float: left;
    background: #efeff4;
}

.detail_box >>> p {
    width: 100%;
}

.detail_box >>> img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

footer {
    width: 100%;
    height: 1rem;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    font-size: 0.24rem;
    background: #fff;
    border-top: 0.02rem solid #d0d0d0;
}

footer .num {
    width: 3rem;
    height: 100%;
    color: #ef6759;
    font-size: 0.3rem;
    line-height: 1rem;
    float: left;
    padding: 0 0.36rem;
    box-sizing: border-box;
}

footer button {
    float: right;
    width: 2rem;
    height: 100%;
    border: none;
    outline: none;
    color: #fff;
    width 50%
}

footer .incar {
    background: #ff5e00;
    height: 100%;
}

footer .buy {
    // font-size: .32rem;
    background: #aad114;
    height: 100%;
}

.mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
}

.mask .mask_box {
    width: 100%;
    height: 60%;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.mask .mask_box .mbox_top {
    width: 100%;
    height: 30%;
    border-bottom: 1px solid #cbcbcb;
    padding: 0.4rem 0.4rem;
    box-sizing: border-box;
    position: relative;
}

.mask .mask_box .mbox_top .head {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: -0.3rem;
    /* margin-right:.4rem; */
}

.mask .mask_box .mbox_top .head img {
    width: 100%;
    height: 100%;
}

.mask .mask_box .mbox_top .t-right {
    position: absolute;
    height: 100%;
    width: 5.1rem;
    right: 0;
    top: 0;
    padding: 0 .4rem;
    box-sizing: border-box;
}

.mask .mask_box .mbox_top .t-right h5 {
    font-size: 0.36rem;
    color: #ff5722;
    line-height: 0.64rem;
}
.mask .mask_box .mbox_top .t-right h5 .buyChi
    font-size 14px

.mask .mask_box .mbox_top .t-right p {
    font-size: 0.24rem;
    color: #8f8f94;
    line-height: 0.48rem;
}

.mask .mask_box .mbox_bottom {
    width: 100%;
    height: 75%;
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.mask .mask_box .mbox_bottom p {
    font-size: 0.32rem;
    color: #909093;
    line-height: 0.72rem;
}

.mask .mask_box .mbox_bottom .bor {
    text-align:center;
    border: none;
    border-radius: 5px;
    margin-bottom: 0.4rem;
    float: left;
    margin-left: 10px;
    font-size: 18px;
    line-height: 30px;
    background: #999;
    width:60px;
    height:30px;
    color:#fff;
}

.mask .mask_box .mbox_bottom .plussub {
    font-size: 0.3rem;
    float: left;
    width: 100%;
    height: 0.66rem;
    margin-top: 10px;
}

.mask .mask_box .mbox_bottom .plussub .many {
    font-size: 0.3rem;
    line-height: 0.66rem;
    color: #909093;
    display: inline-block;
    margin-right: 0.5rem;
    float: left;
}

.mask .mask_box .mbox_bottom .plussub .sub {
    width: 0.6rem;
    height: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    float: left;
    text-align: center;
    line-height: 0.6rem;
}

.mask .mask_box .mbox_bottom .plussub .yzquantity1 {
    width: 1.96rem;
    height: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    float: left;
    text-align: center;
}

.mask .mask_box .mbox_bottom .plussub .plus {
    width: 0.6rem;
    height: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    float: left;
    text-align: center;
    line-height: 0.6rem;
}

.mask .mask_box .bom {
    width: 100%;
    height: 0.8rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99999;
}

.mask .mask_box .bom button {
    float: left;
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    color: #fff;
}

.mask .mask_box .bom .cancel {
    background: #808080;
    font-size: 0.24rem;
}

.mask .mask_box .bom .sure {
    background: #ff5722;
    font-size: 0.24rem;
}

.price_bg {
    background: url('../../assets/imgs/bq-2.png') no-repeat center;
    width: 154px;
    height: 56px;
    // background: #f90;
    display: inline-block;
    font-size: 0.24rem;
    font-family: 'Adobe Heiti Std';
    color: #fff;
    position: relative;
    right: -1rem;
    top: 40px;
}

.price_bg .price {
       position: absolute;
    left: 0.7rem;
    top: 0.26rem;
    font-size: 0.28rem;
}

.price_bg .price .pir {
    font-size: 0.4rem;
}

.showclass {
    display: block;
}

.hideclass {
    display: none;
}

.selected {
    background: #ff5722!important;
    color: #fff
}
</style>